<template>
	<view class="main">
		<!-- #ifdef MP-WEIXIN -->
		<navbar :bgColor="bgColor" :btnColors='btnColor' title="我的消息" :isGoBack="true" :isNotice="true" :visible="true"></navbar>
		<!-- #endif -->			
		<view>
		  <swiper class="tab-content"  duration="300" bindchange="changeTab" :style="{'height':winHeight+'px'}">
				<!-- 全部 -->
				<swiper-item>
					<scroll-view :scroll-y="true" class="new-list-box" @scrolltolower="allLoadMore" scroll-top="scrollTop" scroll-with-animation :refresher-enabled="true" refresher-threshold="80" refresher-default-style="white" refresher-background="white" :refresher-triggered="triggered" @refresherrefresh="onAllRefresh">
						<block v-if="allTabList.length > 0">
						  <view class=" pl-20 pr-20" v-for="(item,index) in allTabList" :key="index" style="margin-top:35rpx !important;border-radius: 60rpx !important;" >
						  	<view class="flex align-center border-b pb-15" @click="domessage(item.id)">				
						  		<view class="level_img" v-if="item.type ==1 || item.type ==2">
						  			<image :src="api_url+'/static/upload/a2ea351c3d2f5386/b98bd889ba683972.png'" style="width: 88rpx; height: 88rpx;"></image>
						  			<text class="red-dot" v-if="item.is_read ==0"></text>
						  		</view>
						  		<view class="level_img" v-if="item.type ==3 ">
						  			<image :src="api_url+'/static/upload/f3c2c5d6ebbc49e2/9afcb048020c9d13.png'" style="width: 88rpx; height: 88rpx;"></image>
						  			<text class="red-dot" v-if="item.is_read ==0"></text>
						  		</view>
						  		
						  		<view class="flex flex-direction" style="margin-left: 20rpx;">
						  		   <view class="flex justify-between align-center text-center">
						  		   	<text>{{item.title}}</text>
						  			<text class="text-sm">{{item.add_time}}</text>
						  		   </view>
						  		   <text class="productNameText mt-15" >{{item.content}}</text>
						  		</view>
						  		
						  	</view>				
						  	
						  </view>		
						</block>   												  
					</scroll-view>
				</swiper-item>       
			</swiper>				
		</view>	
	</view>	
</template>
<script>
	export default {
			data() {
				return {
					...getApp().globalData.config,		
					currentTab:1,
					pageNo:1,
					allTabList:[],
					winHeight:'',
					scrollTop: 0, // 设置竖向滚动条位置
					triggered: false, // 下拉是否激活
					recordCount:1,
				}
			},
			onLoad() {
				let height = uni.getSystemInfoSync().windowHeight;
				this.winHeight = (height - 100);
			},
			onShow(){
				let pageNo=1
				this.allTabList=[]
				this._requestPageList(true);
			},
			methods:{
				//详情
				domessage(id){
					this.$routers.router('/pages/pagesuser/message/detail?id='+id,'navigateTo') 
				},
				
				
				// 参数
				_requestPageList(isLoadMore = false, callback) {
				  if(!isLoadMore){
					this.allTabList=[]; // 全部       
					this.pageNo= 1;
					
				  }
				  let opt = {
					page :this.pageNo,				
					token:uni.getStorageSync('userInfo').token,
				  }    
				  this._requestPageListCom("virtualTaskList", opt, callback);
				},
				// 列表接口
				_requestPageListCom(url, params, callback) {    
				  this.$http.message_list(params).then(res => {
					if (res.resCode == "9999") {
					  let oldList = [];
					  oldList = this.allTabList;       
					  const newGoodsList = res.data.list
					  if(this.pageNo> res.data.page){
						  this.pageNo=res.data.page
					  }
					  const allData = [...oldList, ...newGoodsList] 
					  this.allTabList=allData
					  this.recordCount=res.data.page
					  if(callback && typeof callback === 'function'){
						callback()
					  }
					}
				  })
				},			  
				// 上拉加载  滚动到底部/右边时触发
				allLoadMore(e){
					let _self = this;
					if (this._allLoadMore) return
					this._allLoadMore = true;
					this.pageNo= ++_self.pageNo				
					this._requestPageList(true, () => {
					  _self._allLoadMore = false;
					});
				},
				
				// 下拉刷新接口
				onAllRefresh() {
				 // 开启下拉自定义样式
					this.triggered = true;
		            this.pageNo=1;
					this._requestPageList(false, () => {
						// 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
						this.triggered = false;
					});    
				}				
			}
		}
</script>

<style>
	@import url("./index.css");
</style>